<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %> 
<jsp:useBean id="now" class="java.util.Date" />


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>H+ 后台主题UI框架 - 主页</title>

    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctx }/res/hplus/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="${ctx }/res/hplus/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="${ctx }/res/hplus/css/animate.min.css" rel="stylesheet">
    <link href="${ctx }/res/hplus/css/style.min.css?v=4.0.0" rel="stylesheet">
</head>


<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">月</span>
                        <h5>收入</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">${currentMonth.amount }</h1>
                        <div class="stat-percent font-bold text-success">
                        	<c:choose>
                        		<c:when test="${increaseAmountPercentMonth>0 }">
                        			${increaseAmountPercentMonth}%
                        			<i class="fa fa-level-up"></i>
                        		</c:when>
                        		<c:otherwise>
                        			${increaseAmountPercentMonth*-1}%
                        			<i class="fa fa-level-down"></i>
                        		</c:otherwise>
                        	</c:choose>
                        </div>
                        <small>总收入</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info pull-right">全年</span>
                        <h5>订单</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">${currentYear.quantity }</h1>
                        <div class="stat-percent font-bold text-info">
							<c:choose>
                        		<c:when test="${increaseQuantityPercentYear>0 }">
                        			${increaseQuantityPercentYear}%
                        			<i class="fa fa-level-up"></i>
                        		</c:when>
                        		<c:otherwise>
                        			${increaseQuantityPercentYear*-1}%
                        			<i class="fa fa-level-down"></i>
                        		</c:otherwise>
                        	</c:choose>
                        </div>
                        <small>新订单</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">今天</span>
                        <h5>访客</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">${todayUser.loginAmount}</h1>
                        <div class="stat-percent font-bold text-navy">
							<c:choose>
                        		<c:when test="${increasePercentDay>0 }">
                        			${increasePercentDay}%
                        			<i class="fa fa-level-up"></i>
                        		</c:when>
                        		<c:otherwise>
                        			${increasePercentDay*-1}%
                        			<i class="fa fa-level-down"></i>
                        		</c:otherwise>
                        	</c:choose>
                        </div>
                        <small>新访客</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-danger pull-right">最近一个月</span>
                        <h5>活跃用户</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">${monthUser.loginAmount}</h1>
                        <div class="stat-percent font-bold text-danger">
							<c:choose>
                        		<c:when test="${increasePercentMonth>0 }">
                        			${increasePercentMonth}%
                        			<i class="fa fa-level-up"></i>
                        		</c:when>
                        		<c:otherwise>
                        			${increasePercentMonth*-1}%
                        			<i class="fa fa-level-down"></i>
                        		</c:otherwise>
                        	</c:choose>
                        </div>
                        <small><fmt:formatDate value="${now}" type="both" dateStyle="long" pattern="MM" var="bb"/>${bb}月</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>订单</h5>
                        <div class="pull-right">
                            <div class="btn-group">
                                <!-- <button type="button" class="btn btn-xs btn-white active">天</button>
                                <button type="button" class="btn btn-xs btn-white">月</button>
                                <button type="button" class="btn btn-xs btn-white">年</button> -->
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-9">
                                <div class="flot-chart">
                                    <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <ul class="stat-list">
                                    <li>
                                        <h2 class="no-margins">${currentMonth.allQuantity}</h2>
                                        <small>最近一个月订单总数</small>
                                        <div class="stat-percent font-bold text-navy">
											<c:choose>
				                        		<c:when test="${increaseAllQuantityPercentMonth>0 }">
				                        			${increaseAllQuantityPercentMonth}%
				                        			<i class="fa fa-level-up"></i>
				                        		</c:when>
				                        		<c:otherwise>
				                        			${increaseAllQuantityPercentMonth*-1}%
				                        			<i class="fa fa-level-down"></i>
				                        		</c:otherwise>
				                        	</c:choose>
                                        </div>
                                        <div class="progress progress-mini">
                                        	<c:choose>
				                        		<c:when test="${increaseAllQuantityPercentMonth>0 }">
				                        			<div style="width: ${increaseAllQuantityPercentMonth }%;" class="progress-bar"></div>
				                        		</c:when>
				                        		<c:otherwise>
				                        			<div style="width: ${increaseAllQuantityPercentMonth*-1 }%;" class="progress-bar"></div>
				                        		</c:otherwise>
				                        	</c:choose>
                                        </div>
                                    </li>
                                    <li>
                                        <h2 class="no-margins ">${currentMonth.quantity} </h2>
                                        <small>最近一个月付款订单</small>
                                        <div class="stat-percent font-bold text-success">
											<c:choose>
				                        		<c:when test="${increaseQuantityPercentMonth>0 }">
				                        			${increaseQuantityPercentMonth}%
				                        			<i class="fa fa-level-up"></i>
				                        		</c:when>
				                        		<c:otherwise>
				                        			${increaseQuantityPercentMonth*-1}%
				                        			<i class="fa fa-level-down"></i>
				                        		</c:otherwise>
				                        	</c:choose>
                                        </div>
                                        <div class="progress progress-mini">
                                        	<c:choose>
				                        		<c:when test="${increaseAmountPercentMonth>0 }">
				                        			<div style="width: ${increaseAmountPercentMonth }%;" class="progress-bar"></div>
				                        		</c:when>
				                        		<c:otherwise>
				                        			<div style="width: ${increaseAmountPercentMonth*-1 }%;" class="progress-bar"></div>
				                        		</c:otherwise>
				                        	</c:choose>
                                        </div>
                                    </li>
                                    <li>
                                        <h2 class="no-margins ">${currentMonth.amount}</h2>
                                        <small>最近一个月销售额</small>
                                        <div class="stat-percent font-bold text-danger">
											<c:choose>
				                        		<c:when test="${increaseAmountPercentMonth>0 }">
				                        			${increaseAmountPercentMonth}%
				                        			<i class="fa fa-level-up"></i>
				                        		</c:when>
				                        		<c:otherwise>
				                        			${increaseAmountPercentMonth*-1}%
				                        			<i class="fa fa-level-down"></i>
				                        		</c:otherwise>
				                        	</c:choose>
                                        </div>
                                        <div class="progress progress-mini">
                                        	<c:choose>
				                        		<c:when test="${increaseAmountPercentMonth>0 }">
				                        			<div style="width: ${increaseAmountPercentMonth }%;" class="progress-bar"></div>
				                        		</c:when>
				                        		<c:otherwise>
				                        			<div style="width: ${increaseAmountPercentMonth*-1 }%;" class="progress-bar"></div>
				                        		</c:otherwise>
				                        	</c:choose>
                                        </div>
                                    </li>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>

    <script src="${ctx }/res/hplus/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx }/res/hplus/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="${ctx }/res/hplus/js/plugins/flot/jquery.flot.js"></script>
    <script src="${ctx }/res/hplus/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="${ctx }/res/hplus/js/plugins/flot/jquery.flot.spline.js"></script>
    <script src="${ctx }/res/hplus/js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="${ctx }/res/hplus/js/plugins/flot/jquery.flot.pie.js"></script>
    <script src="${ctx }/res/hplus/js/plugins/flot/jquery.flot.symbol.js"></script>
    <script src="${ctx }/res/hplus/js/plugins/peity/jquery.peity.min.js"></script>
    <script src="${ctx }/res/hplus/js/demo/peity-demo.min.js"></script>
    <script src="${ctx }/res/hplus/js/content.min.js?v=1.0.0"></script>
    <script src="${ctx }/res/hplus/js/plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="${ctx }/res/hplus/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="${ctx }/res/hplus/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    <script src="${ctx }/res/hplus/js/plugins/easypiechart/jquery.easypiechart.js"></script>
    <script src="${ctx }/res/hplus/js/plugins/sparkline/jquery.sparkline.min.js"></script>
    <script src="${ctx }/res/hplus/js/demo/sparkline-demo.min.js"></script>
    <script>

					$(document).ready(
							function() {
								$(".chart").easyPieChart({
									barColor : "#f8ac59",
									scaleLength : 5,
									lineWidth : 4,
									size : 80
								});
								$(".chart2").easyPieChart({
									barColor : "#1c84c6",
									scaleLength : 5,
									lineWidth : 4,
									size : 80
								});
								var data2 = ${payOrder};
								var data3 = ${allOrder};
								var dataset = [ {
									label : "订单数",
									data : data3,
									yaxis : 2,
									color : "#1ab394",
									/* bars : {
										show : true,
										align : "center",
										barWidth : 24 * 60 * 60 * 600,
										lineWidth : 0
									} */
									lines : {
										lineWidth : 1,
										show : true,
										fill : true,
										fillColor : {
											colors : [ {
												opacity : 0.2
											}, {
												opacity : 0.2
											} ]
										}
									},
									splines : {
										show : false,
										tension : 0.6,
										lineWidth : 1,
										fill : 0.1
									},
								}, {
									label : "付款数",
									data : data2,
									yaxis : 2,
									color : "#464f88",
									lines : {
										lineWidth : 1,
										show : true,
										fill : true,
										fillColor : {
											colors : [ {
												opacity : 0.2
											}, {
												opacity : 0.2
											} ]
										}
									},
									splines : {
										show : false,
										tension : 0.6,
										lineWidth : 1,
										fill : 0.1
									},
									/* bars : {
										show : true,
										align : "center",
										barWidth : 24 * 60 * 60 * 600,
										lineWidth : 0
									} */
								} ];
								var options = {
									xaxis : {
										mode : "time",
										tickSize : [ 3, "day" ],
										tickLength : 0,
										axisLabel : "Date",
										axisLabelUseCanvas : true,
										axisLabelFontSizePixels : 12,
										axisLabelFontFamily : "Arial",
										axisLabelPadding : 10,
										color : "#838383"
									},
									yaxes : [ {
										position : "left",
										max : 1070,
										color : "#838383",
										axisLabelUseCanvas : true,
										axisLabelFontSizePixels : 12,
										axisLabelFontFamily : "Arial",
										axisLabelPadding : 3
									}, {
										position : "right",
										clolor : "#838383",
										axisLabelUseCanvas : true,
										axisLabelFontSizePixels : 12,
										axisLabelFontFamily : " Arial",
										axisLabelPadding : 67
									} ],
									legend : {
										noColumns : 1,
										labelBoxBorderColor : "#000000",
										position : "nw"
									},
									grid : {
										hoverable : true,
										borderWidth : 0,
										color : "#838383"
									}
								};
								function gd(year, month, day) {
									return new Date(year, month - 1, day)
											.getTime();
								};
								$.plot($("#flot-dashboard-chart"), dataset,
										options);
								function getMoth(str){  
						            var oDate = new Date(str*1);
						            var oMonth = oDate.getMonth()+1;  
						            var oDay = oDate.getDate();  
						            var oTime = oMonth +'月'+ oDay+'日';//最后拼接时间  
						            return oTime;  
						        }  
							
							// 节点提示    
					        function showTooltip(x, y, contents) {    
					            $('<div id="tooltip">' + contents + '</div>').css( {    
					                position: 'absolute',    
					                display: 'none',    
					                top: y + 10,    
					                left: x + 10,    
					                border: '1px solid #fdd',    
					                padding: '2px',    
					                'background-color': '#dfeffc',    
					                opacity: 0.80    
					            }).appendTo("body").fadeIn(200);    
					        }    
					    
					        var previousPoint = null;    
					        // 绑定提示事件    
					        $("#flot-dashboard-chart").bind("plothover", function (event, pos, item) {    
					            if (item) {    
					                if (previousPoint != item.dataIndex) {    
					                    previousPoint = item.dataIndex;    
					                    $("#tooltip").remove();    
					                    var y = item.datapoint[1].toFixed(0);    
					    				var x=item.datapoint[0].toFixed(0);
					                    var tip = "count：";    
					                    showTooltip(item.pageX, item.pageY,tip+y+"，"+getMoth(x));    
					                }    
					            }    
					            else {    
					                $("#tooltip").remove();    
					                previousPoint = null;    
					            }    
					        });    
					    });    
								
				</script>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
</body>

</html>